﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015-2017 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: target control</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="target control for OL3" />
  <meta name="keywords" content="ol3, control, target, center, canvas" />

  <link rel="stylesheet" href="../style.css" />

  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>


</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: target controls</h1>
  </a>
  <div class="info">
    Target control draw a target to materialize the center of the map.
    <br/>
    The style define the target to draw
    <ul><li>
      an <i>ol.style.Stroke</i> and a <i>radius</i> will draw a cros on the map
    </li><li>
      an <i>ol.style.Image</i> to draw an image on the map
    </li><li>
      an <i>ol.style.Text</i> to draw text on the map
    </li></ul>
    The <i>composite</i> option performs a composite operation when drawing.
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <ul><li>
      Style: <select id="style" onchange="setTarget()">
        <option value="cross">default</option>
        <option value="circle">circle</option>
        <option value="regular">regular shape</option>
        <option value="icon">icon</option>
        <option value="text">text</option>
        <option value="bullseye">text bullseye (fontawesome)</option>
        <option value="crosshairs">text crosshairs (fontawesome)</option>
        <option value="mixt">mixt</option>
      </select>
    </li><li>
      Color: <select id="color" onchange="setTarget()">
          <option value="black">black</option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="blue">blue</option>
            <option value="yellow">yellow</option>
          <option value="white">white</option>
        </select>
    </li><li>
      Composite: <select id="composite" onchange="setTarget()">
          <option value="">default</option>
          <option value="difference">difference</option>
            <option value="multiply">multiply</option>
          <option value="overlay">overlay</option>
            <option value="luminosity">luminosity</option>
          <option value="xor">xor</option>
        </select>
    </li></ul>
  </div>

  <script type="text/javascript">

    // Layers
    var layers = [
      new ol.layer.Tile({
        title:'terrain-background',
        source: new ol.source.Stamen({ layer: 'terrain' })
      })
    ];

    // The map
    var map = new ol.Map ({
      target: 'map',
      view: new ol.View ({
        zoom: 5,
        center: [166326, 5992663]
      }),
      layers: layers
    });

    // Target control
    var img = new Image();
    img.src = "../data/target.png";
    var target;

    function setTarget() {	
      if (target) map.removeControl(target);
      
      var stroke = new ol.style.Stroke({ color:$("#color").val(), width:2 });

      switch ($("#style").val()) {
        case 'icon': {
          style = new ol.style.Style({ 
            image: new ol.style.Icon( { img: img, imgSize:[img.width,img.height] } ) 
          });
          break;
        }
        case 'circle': {
          style =	new ol.style.Style({ 
            image: new ol.style.Circle({ radius: 10, stroke: stroke }),
            snapToPixel:true
          });
          break;
            }
        case 'regular': {
          style = new ol.style.Style({
            image: new ol.style.RegularShape ({
              radius:20,
              points: 6,
              stroke: stroke
            }),
            snapToPixel:true
          });
          break;
        }
        case 'text': {
          style = new ol.style.Style({
            text: new ol.style.Text({
              text: 'A',
              font: '30px sherif',
              fill: new ol.style.Fill({ color: $("#color").val() })
            })
          });
          break;
        }
        case 'bullseye':
        case 'crosshairs': {
          style = new ol.style.Style({
            text: new ol.style.Text({
              text: $("#style").val()=="bullseye" ? '\uf140' : '\uf05b',
              font: '30px Fontawesome',
              fill: new ol.style.Fill({ color: $("#color").val() })
            })
          });
          break;
        }
        case 'mixt': { 
          style =	[	
            new ol.style.Style({ image: new ol.style.RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, stroke: stroke }), snapToPixel:true }),
            new ol.style.Style({ image: new ol.style.Circle({	radius:10, stroke: stroke }), snapToPixel:true }),
            new ol.style.Style({ image: new ol.style.RegularShape ({ radius:20,points: 6, stroke: stroke}), snapToPixel:true })
          ];
          break;
        }
        default: {
          style =	[	
            new ol.style.Style({ image: new ol.style.RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, snapToPixel:true, stroke: new ol.style.Stroke({ color: "#fff", width:3 }) }) }),
            new ol.style.Style({ image: new ol.style.RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, snapToPixel:true, stroke: stroke }) })
          ];
          break;
        }
      }
      target =  new ol.control.Target ({	style: style, composite: $("#composite").val() });
      map.addControl(target);

    }

    setTarget();

        
  </script>

</body>
</html>